<template>
  <view class="c-wrapper">
    <swiper class="swiper" circular indicator-dots autoplay indicator-active-color="#d8d8d8">
      <swiper-item v-for="(item, index) in list" :key="index">
        <view class="swiper-item">
          <image mode="widthFix" :src="item.url" @error="imageError"></image>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  props: {
    list: {
      type: Array,
      default: [
        {
          url: '../../static/bar/bar1.jpeg'
        }
      ]
    }
  },
  components: {},
  data() {
    return {}
  },
  methods: {
    handlepreviewImage(curr, imageList) {
      uni.previewImage({
        current: curr,
        showmenu: true,
        urls: imageList,
        indicator: 'number',
        loop: true
      })
    }
  }
}
</script>

<style lang="scss" scoped>
$screen_scale: 100vw / 100vh;

.swiper {
  width: 100%;
  border-radius: $def-radius;
  @if $screen_scale< 1 {
    height: $screen_scale * 50vw;
  } @else {
    height: $screen_scale * 50vh;
  }

  box-sizing: border-box;
  overflow: hidden;
  .swiper-item {
    width: 100%;
    height: 100%;
    border-radius: $def-radius;
    overflow: hidden;
    image {
      width: 100%;
      border-radius: $def-radius;
    }
  }
}
</style>
